{% extends "base.html" %}
{% import "bootstrap/wtf.html" as wtf %}

{% block page_content %}
<!-- Button Add -->
<button type="button" class="btn btn-primary btn-1g pull-right" data-toggle="modal" data-target="#myModal">增添</button>

<!-- modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">

            <!-- header modal -->
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">
                    <span aria-hidden="true">&times;</span>
                    <span class="sr-only">关闭</span>
                </button>
                <h4 class="modal-title" id="myModalLabel" align="center"><b>新的</b> ToDo :: List</h4>
            </div>

            <!-- content model -->
            <div class="modal-body">
                <div class="row">
                    <div class="col-md-8 col-md-offset-2">
                        {{ wtf.quick_form(form, form_type="horizontal") }}
                    </div>

                </div>
            </div>
            <!--model end-->
        </div>
    </div>
</div>


<table class="table table-hover">
    <thead>
    <th class="active">编号</th>
    <th class="active">描述</th>
    <th class="active">是否完成</th>
    <th class="active">创建时间</th>
    </thead>
    <tbody>

    {% for todo in todo_list.items %}
    <!--tr-->
    {% if todo.status %}
    <tr class="success">
        {% else %}
    <tr class="info">{% endif %}
        <td class="">{{ loop.index }}</td>
        <td class="">{{ todo.title }}</td>
        <td class="">{{ "是" if todo.status else "否" }}</td>
        <td class="todo_create_time">{{ todo.create_time }}</td>
        <td>
            {% if todo.status == '1' or todo.status == 'True' or todo.status == 'Yes' or todo.status == 'yes' %}
            <a href="{{ url_for('delete_to_do', id=todo.id ) }}" class="btn btn-danger" role="button">删除</a>
            {% else %}
            <a role="button" href="{{ url_for('modify_to_do', id=todo.id )}}" class="btn btn-success">修改</a>
            {% endif %}
        </td>
    </tr>
    {% endfor %}
    </tbody>
</table>

<div class="footer" align="center">
    <div class="footer-nav">
        {% if todo_list.has_prev %}
        <a href="{{ url_for('show_to_do_list', page=todo_list.prev_num) }}"><< 前一页</a>
        {% else %}<< 前一页
        {% endif %}
        :|:
        <a href="{{ url_for('show_to_do_list', page=1) }}">到首页</a>
        :|:
        <a href="{{ url_for('show_to_do_list', page=todo_list.pages) }}" >到尾页</a>
        :|:
        {% if todo_list.has_next %}
        <a href="{{ url_for('show_to_do_list', page=todo_list.next_num) }}">后一页 >></a>
        {% else %}后一页 >>
        {% endif %}

    </div>
</div>

{% endblock %}